<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-input
          placeholder="输入回复关键词查询"
          v-model="page.content"
          maxlength="20"
        >
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="输入用户id查询" v-model.number="page.userId">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="输入帖子id查询" v-model.number="page.postId">
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-search" @click="search" type="success"
          >搜索
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-delete" @click="reset" type="info"
          >重置
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="applyList" border>
      <el-table-column prop="id" label="回复id" width="80"> </el-table-column>
      <el-table-column
        prop="postId"
        label="所属帖子id"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="userId"
        label="回复人id"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="content"
        label="回复内容"
        width="350"
      ></el-table-column>
      <el-table-column prop="applyTime" label="回复时间" width="160">
      </el-table-column>
      <el-table-column prop="parentId" label="被回复人id" width="120">
      </el-table-column>
      <el-table-column
        prop="parentApply"
        label="被这一条回复评论的回复id"
        width="150"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            title="确认删除？"
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              style="color: red"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 21, 27, 36]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getApplies, deleteApply } from "../api/applyMG";
export default {
  name: "ApplyView",
  data() {
    return {
      page: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
        content: "",
        userId: "",
        postId: "",
      },
      applyList: [],
    };
  },
  methods: {
    handleDelete(id) {
      console.log(1);
      //删除回复
      deleteApply(id).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            type: "success",
            message: res.data.msg,
          });
          this.getApplyList();
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    reset() {
      //点击重置
      this.page.currentPage = 1;
      (this.page.content = ""),
        (this.page.userId = ""),
        (this.page.postId = "");
      this.getApplyList();
    },
    search() {
      //点击搜索
      this.page.currentPage = 1;
      this.getApplyList();
    },
    async getApplyList() {
      //获取所有分类的列表
      await getApplies(this.page).then((res) => {
        if (res.data.code == 200) {
          this.page.total = res.data.data.total;
          this.applyList = res.data.data.list;
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      //重新获取列表数据
      this.getApplyList();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      //重新获取列表数据
      this.getApplyList();
    },
  },
  mounted() {
    this.getApplyList();
  },
};
</script>
  <style lang="scss" scoped>
</style>